<!-- 会员管理 -->
<template>
  <div>
    <div class="search">
      <!-- 搜索部分 -->
      <el-select
        v-model="configReq.status"
        clearable
        placeholder="请选择用户状态"
      >
        <el-option
          v-for="item in options.status"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-model="configReq.level"
        clearable
        placeholder="请选择会员等级"
      >
        <el-option
          v-for="item in options.level"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-model="configReq.gender"
        clearable
        placeholder="请选择用户性别"
      >
        <el-option
          v-for="item in options.gender"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model.trim="configReq.id"
        clearable
        placeholder="请输入用户ID"
      />
      <el-input
        v-model.trim="configReq.nickname"
        clearable
        placeholder="请输入昵称"
      />
      <el-button type="primary" :icon="Search" @click="debounce(getInfo)"
        >查找</el-button
      >
    </div>
    <div style="margin-top: 20px">
      <!-- 列表 -->
      <el-table :data="infoList" border align="center">
        <el-table-column prop="id" label="用户ID" align="center" width="80" />
        <el-table-column
          prop="nickname"
          label="昵称"
          align="center"
          width="80"
        />
        <el-table-column prop="phone" label="手机号" align="center" />
        <el-table-column label="性别" width="120" align="center">
          <template #default="scope">
            <el-tag>{{ scope.row.gender == 1 ? "女" : "男" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="会员等级">
          <template #default="scope">
            <el-tag>{{ scope.row.level ? "VIP会员" : "普通会员" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="生日" align="center">
          <template #default="scope">
            {{ computTime(scope.row.birthday, 0) }}
          </template>
        </el-table-column>
        <el-table-column label="上次登录时间" align="center">
          <template #default="scope">
            {{ computTime(scope.row.gmtLastLogin, 1) }}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="scope">
            <el-tag>{{ scope.row.status ? "激活" : "冻结" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="上次登录IP" align="center">
          <template #default="scope">
            {{ scope.row.lastLoginIp }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <!-- scope -->
          <template #default="scope">
            <el-button
              type="primary"
              @click="debounce(activation, scope.row)"
              >{{ scope.row.status ? "冻结" : "激活" }}</el-button
            >
            <el-button type="primary" @click="startEditing(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="dialog">
      <!-- 编辑的弹出框 -->
      <el-dialog
        v-model="editDialog"
        title="编辑"
        width="700px"
        destroy-on-close
      >
        <el-form
          ref="formRef"
          :model="editData.user"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item label="用户昵称" prop="nickname">
            <el-input v-model.trim="editData.user.nickname" type="text" />
          </el-form-item>
          <el-form-item label="用户手机号" prop="phone">
            <el-input
              v-model.trim="editData.user.phone"
              type="text"
              maxlength="11"
            />
          </el-form-item>
          <el-form-item label="用户密码" :rules="[{ required: true }]">
            <el-input
              disabled
              v-model.trim="editData.user.password"
              type="text"
            />
          </el-form-item>
          <el-form-item
            label="用户性别"
            prop="gender"
            :rules="[
              {
                message: '用户性别不能为空',
                trigger: 'change',
                required: true,
              },
            ]"
          >
            <el-select
              v-model="editData.user.gender"
              placeholder="请选择用户性别"
            >
              <el-option
                v-for="item in options.gender.slice(0, 2)"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="用户等级"
            prop="level"
            :rules="[
              {
                message: '用户等级不能为空',
                trigger: 'change',
                required: true,
              },
            ]"
          >
            <el-select
              v-model="editData.user.level"
              placeholder="请选择用户等级"
            >
              <el-option
                v-for="item in options.level.slice(0, 2)"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="用户状态"
            prop="status"
            :rules="[
              {
                message: '用户状态不能为空',
                trigger: 'change',
                required: true,
              },
            ]"
          >
            <el-select
              v-model="editData.user.status"
              placeholder="请选择用户状态"
            >
              <el-option
                v-for="item in options.status.slice(0, 2)"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span>
            <el-button @click="editDialog = false">取消</el-button>
            <el-button type="primary" @click="submitForm('formRef')"
              >修改</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
    <div style="margin: 20px 0px">
      <!-- 分页组件 -->
      <paging v-bind="pageInfo" @changeReq="changeConfig"></paging>
    </div>
  </div>
</template>

<script>
import { post } from "@/utils/http";
import { Search } from "@element-plus/icons-vue";
import Paging from "@/components/paging/Paging";
export default {
  setup() {
    return {
      Search, //属性不用注册
    };
  },
  components: { Paging },
  data() {
    //用户昵称验证
    let validateName = (rule, value, callback) => {
      if (!value) {
        callback(new Error("用户昵称不能为空"));
      } else {
        callback();
      }
    };
    //手机号验证
    let validatePho = (rule, value, callback) => {
      if (!value) {
        callback(new Error("手机号不能为空"));
      } else {
        var reg = /^[1]([3-9])[0-9]{9}$/;
        if (!reg.test(value)) {
          callback(new Error("手机号格式错误"));
        }
        callback();
      }
    };
    return {
      infoList: [], //数据列表
      editDialog: false, //是否显示弹出框
      // 用于请求表格数据的配置
      configReq: {
        _gp: "admin.user",
        _mt: "list",
        id: "", //用户ID
        nickname: "", //用户昵称
        level: null, //用户等级
        gender: null, //用户性别
        status: null, // 用户状态
        pageNo: 1, // 当前页码
        limit: 5, //显示条数
      },
      // 传给分页组件的数据
      pageInfo: {
        page: 1, //跳转页数(不同)
        limit: 5, //显示条数
        total: 0,
      },
      // 用户的选择器数据
      options: {
        status: [
          { value: 0, label: "冻结" },
          { value: 1, label: "激活" },
          { value: "", label: "全部" },
        ],
        level: [
          { value: 0, label: "普通会员" },
          { value: 1, label: "VIP会员" },
          { value: "", label: "全部" },
        ],
        gender: [
          { value: 1, label: "女" },
          { value: 2, label: "男" },
          { value: "", label: "全部" },
        ],
      },
      // 修改的数据
      editData: {
        _gp: "admin.user",
        _mt: "edit",
        user: {
          nickname: "",
          phone: null,
          password: null,
          gender: null,
          level: null,
          status: null,
        },
      },
      // 验证规则
      rules: {
        nickname: [
          { validator: validateName, trigger: "blur", required: true },
        ],
        phone: [{ validator: validatePho, trigger: "blur", required: true }],
      },
    };
  },
  methods: {
    // 获取数据的方法
    getInfo() {
      post(this.configReq)
        .then((res) => {
          if (200 == res.errno) {
            //成功状态码
            // console.log(res);
            this.infoList = res.data.items; //获取表格信息
            this.pageInfo.total = res.data.total; //获取总条数
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 组件触发的数据改变
    changeConfig(data) {
      let { page: pageNo, limit } = data;
      Object.assign(this.configReq, { pageNo, limit });
      this.getInfo();
    },
    //计算时间
    computTime(time, type) {
      let { year, month, date, hour, minute } = new Date(time).formatDate();
      if (type == 0) {
        let data = time ? year + "年" + month + "月" + date + "日" : "-";
        return data;
      } else if (type == 1) {
        let data = time
          ? month + "月" + date + "日" + hour + "时" + minute + "分"
          : "-";
        return data;
      }
    },
    // 切换状态的函数
    activation(data) {
      // console.log(data)
      let { id: userId, status } = data;
      post({
        _gp: "admin.user",
        _mt: "editStatus",
        userId,
        status: status ? 0 : 1, //如果为0就变1，如果为1就变0
      })
        .then((res) => {
          if (200 == res.errno) {
            //成功状态码
            ElMessage.success(status ? "冻结成功" : "激活成功");
            this.getInfo(); //重新渲染数据
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 打开编辑
    startEditing(data) {
      this.resetForm(); //重置配置
      Object.assign(this.editData.user, data); //获取该行的数据
      this.editDialog = true;
    },
    // 提交修改
    submitForm(formEl) {
      this.$refs[formEl].validate((valid) => {
        if (valid) {
          this.editData.user = JSON.stringify(this.editData.user); //把对象转换为字符串
          post(this.editData).then((res) => {
            if (200 == res.errno) {
              ElMessage.success("修改成功");
              this.editDialog = false; //关闭弹窗
              this.getInfo(); //刷新数据
            }
          });
        }
      });
    },
    // 重置配置
    resetForm() {
      this.editData = {
        _gp: "admin.user",
        _mt: "edit",
        user: {
          nickname: "",
          phone: null,
          password: null,
          gender: null,
          level: null,
          status: null,
        },
      };
    },
  },
  created() {
    this.getInfo();
  },
};
</script>

<style scoped lang="less">
.search {
  .el-input {
    width: 180px;
    margin-right: 10px;
  }

  .el-select {
    width: 180px;
    margin-right: 10px;
  }
}
.dialog {
  .el-input {
    width: 400px;
  }
}
</style>
